<template>
  <div class="left">
    <!-- <el-image src="../../../static/imgs/logo.png" fit="scale-down"></el-image>
    <span>MovieLens--电影推荐系统</span> -->
    <!-- 1.背景视频 -->
    <video
      src="../assets/bgc.mp4"
      autoplay="autoplay"
      loop="loop"
      muted="muted"
    ></video>
  </div>
</template>

<script>
export default {
  name: "loginBackground",
  data() {
    return {};
  },
};
</script>
<style scoped lang="less">
.left {
  //2.背景图片
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem 0 0 1.25rem;
  width: 68%;
  height: 100%;
  .el-image {
    z-index: 10;
    width: 18rem;
    height: 18rem;

    transform: translateX(-4rem) translateY(-4.5rem);
  }
  span {
    z-index: 10;
    font-size: 1.7rem;
    position: absolute;
    font-family: STXingkai;
    letter-spacing: 0.2rem;
    color: #202222;
    top: 8rem;
    left: 2rem;
  }

  video {
    pointer-events: none;
    /* 禁用鼠标事件 */
    user-select: none;
    /* 禁用选择事件 */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    position: absolute;
    top: 0;
    left: -40%;
    z-index: 1;
    /* 向左移动50% */
    width: auto;
    opacity: 0.8;
    height: 100%;
    min-width: 100%;
    /* 确保宽度至少等于父容器宽度 */
    border-radius: 1.25rem;
  }
}
</style>
